<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="false"
      :background="{ background: '#fff' }"
      title="心理测评"
      title-color="#000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <u-swiper height="400" :list="list" @click="clickSwiper($event)"></u-swiper>
    <view class="menus">
      <view class="left">
        <view
          @click="changeTab(item)"
          class="tab"
          :class="currentTab === item.name ? 'tab-focus' : ''"
          :key="index"
          v-for="(item, index) in typeList"
          >{{ item.name }}</view
        >
      </view>
      <view class="right">
        <view class="papers">
          <view class="each" :style="{ backgroundImage: `url(${imgUrl + paper.cover})`}" v-for="paper in papers">
            <view class="bold">{{paper.name}}</view>
            <view class="mt10">题目数量：{{paper.questions.length}}</view>
            <view class="mt10">建议完成时间：{{paper.time}}</view>
            <view class="rightbtn mt20">
              <view @click="startExam(paper)" class="search">开始测评</view>
              <view @click="examRs(paper)" class="search yellow">测试结果</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
import moment from "moment";
import {
  getPaper,
  getType
} from "../../api/system/api";
export default {
  data() {
    return {
      key: "",
      imgUrl: "http://127.0.0.1:3000/",
      userInfo: {},
      papers: [],
      papersTotal: {},
      typeList: [],
      currentTab: '',
      list: [
        {
          image: "/static/images/heart/swiper1.jpg",
        },
        {
          image: "/static/images/heart/swiper2.jpg",
        },
        {
          image: "/static/images/heart/swiper3.png",
        },
      ],
    };
  },
  methods: {
    changeTab(item) {
      this.currentTab = item.name;
      console.log(this.currentTab)
      this.getPaper(this.currentTab)
    },
    getPaper(type) {
      getPaper({
        page: 1,
        pageSize: 1000,
        type
      }).then(res => {
        this.papers = res.data.data
      })
    },
    startExam(paper) {
      if (this.userInfo.id) {
        if (this.userInfo.role == '咨询师') {
          this.$refs.uToast.show({
            title: "该功能暂时只针对普通用户开发~",
            type: "error",
          });
        } else {
          // 跳转到测试页面
          this.$u.route("/pages/manage/exam", {
            paperId: paper.id,
            userId: this.userInfo.id
          });
        }
      } else {
        this.$refs.uToast.show({
          title: "请先登录~",
          type: "error",
        });
      }
    },
    clickSwiper(e) {
      this.$u.route("/pages/manage/tuiwen");
    },
    // 前往测评统计结果页面
    examRs(paper) {
      console.log(paper)
      this.$u.route("/pages/manage/examChart", {
        paperId: paper.id,
        total: paper.score
      });
    }
  },
  onShow() {
    getType({
      page: 1,
      pageSize: 100,
      type: '测评'
    }).then(res => {
      this.typeList = res.data.data
      if (this.typeList.length) {
        this.changeTab(this.typeList[0]);
      }
    })
    uni.getStorage({
      key: "userInfo",
      success: (res) => {
        this.userInfo = res.data;
      },
      error: (res) => {
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow: hidden;

  .content {
    padding: 20rpx;
  }
  .papers {
    width: 100%;
    height: 80vh;
    overflow: hidden;
    overflow-y: scroll;
    padding: 20rpx;
  
    .each {
      padding: 30rpx;
      background: #fff;
      margin-bottom: 10rpx;
    }
  }
}
.rightbtn {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  .search {
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    background: red;
    color: #fff;
    border-radius: 30rpx;
    font-size: 24rpx;
    padding: 0 20rpx;
  }
}

.menus {
  display: flex;
  height: 62vh;
  overflow: hidden;
  overflow-y: scroll;
  .menu {
    width: 48%;
    padding: 10rpx;
    margin-bottom: 12rpx;
  }

  .left {
    width: 30%;
    height: 80vh;
    background: #f4f4f4;

    .tab {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #f4f4f4;
    }

    .tab-focus {
      background: #fff;
      color: orange;
    }
  }
  .right {
    width: 80%;
    padding: 6rpx 10rpx;
    color: #fff;

    .menu {
      width: 28%;
      height: 160rpx;
      float: left;
      margin-right: 20rpx;
      .img {
        width: 100%;
        height: 120rpx;
      }
      .text {
        width: 100%;
        text-align: center;
      }
    }
  }

  .img {
    width: 100%;
    height: 200rpx;
  }
  .name {
    text-align: center;
    font-weight: bold;
    margin-top: 20rpx;
    color: orangered;
  }
}
.yellow {
  background: #ead721!important;
  margin: 0 20rpx;
}
</style>
